<template>
  <!-- 商品分类导航 -->
  <div class="type-nav" @mouseleave="dealMouseleave">
    <div class="container">
      <h2 class="all" @mouseenter="dealMouseenter">全部商品分类</h2>
      <nav class="nav">
        <a href="###">服装城</a>
        <a href="###">美妆馆</a>
        <a href="###">尚品汇超市</a>
        <a href="###">全球购</a>
        <a href="###">闪购</a>
        <a href="###">团购</a>
        <a href="###">有趣</a>
        <a href="###">秒杀</a>
      </nav>
      <div class="sort" v-show="show_sort">
        <div class="all-sort-list2" @click="goSearch">
          <!-- 1. -->
          <div class="item bo" v-for="c1 in category" :key="c1.categoryId">
            <h3>
              <a
                :data-categoryName="c1.categoryName"
                :data-category1Id="c1.categoryId"
                >{{ c1.categoryName }}</a
              >
            </h3>
            <div class="item-list clearfix">
              <!-- 2. -->
              <div
                class="subitem"
                v-for="c2 in c1.categoryChild"
                :key="c2.categoryId"
              >
                <dl class="fore">
                  <dt>
                    <a
                      :data-categoryName="c2.categoryName"
                      :data-category2Id="c2.categoryId"
                      >{{ c2.categoryName }}</a
                    >
                  </dt>
                  <dd>
                    <!-- 3. -->
                    <em v-for="c3 in c2.categoryChild" :key="c3.categoryId">
                      <a
                        :data-categoryName="c3.categoryName"
                        :data-category3Id="c3.categoryId"
                        >{{ c3.categoryName }}</a
                      >
                    </em>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'TypeNav',
  props: {
    firstShowSort: {
      default: true,
      required: false
    },

    hovorShowSort: {
      default: false
    }
  },
  data() {
    return {
      show_sort: this.firstShowSort
    }
  },

  computed: {
    ...mapState({
      category: (state) => state.home.category
    })
  },

  methods: {
    dealMouseenter() {
      if (this.hovorShowSort) {
        this.show_sort = true
      }
    },
    dealMouseleave() {
      if (this.hovorShowSort) {
        this.show_sort = false
      }
    },
    goSearch(event) {
      //获取触发事件节点的自定义属性【a :data-categoryName】
      //categoryName 自动变小写
      //console.log(event.target.dataset) {categoryname: '手机', categoryid: '2'}
      let { categoryname, category1id, category2id, category3id } =
        event.target.dataset

      //判断是否是a标签
      if (categoryname) {
        let locations = {
          name: 'search',
          query: { categoryName: categoryname }
        }
        if(this.$route.params){
          locations.params=this.$route.params
        }
        if (category1id) {
          locations.query.category1Id = category1id
        } else if (category2id) {
          //二级分类的a
          locations.query.category2Id = category2id
        } else {
          //三级分类的a
          locations.query.category3Id = category3id
        }
        this.$router.push(locations)
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
